<template>
    <div>
        <el-card class="box-card" shadow="never">
            <el-page-header @back="back" :content="content">
            </el-page-header>
                <div class="chat-div">
                    <div>
                      <el-avatar style="display: inline-block;" :size="40" :src="info.avatar_url"></el-avatar>
                      <div class="author-info">
                          <el-row>
                            <span class="author-name">{{info.nickname}}</span>
                            <span class="author-time">{{info.created_at}}</span>
                            </el-row>
                       </div>
                       <div class="icon-btn">
                           <el-link type="primary" @click="openChat(0,info.nickname)">回复</el-link>
                       </div>
                    </div>
                    <!--用户发表的留言-->
                    <div class="talk-box">
                        <div>
                          <span class="reply">{{info.topic}}</span>
                        </div>
                        <div v-if="info.video_arr_length>0" style="margin-top:10px;">
                          <span class="answer-fj"><i class="el-icon-paperclip"></i>附件：</span>
                          <span v-for="(video_url,j) in info.t_video_arr" @click="showVideo(video_url)" class="answer-fj-item">视频{{j+1}}</span>
                        </div>
                    </div>
                    <!--回复内容-->
                    <div class="reply-box">
                        <div v-for="(item,key) in info.list" class="author-title">
                           <el-avatar class="header-img" :size="40" :src="item.avatar_url"></el-avatar>
                           <div class="author-info">
                              <span class="author-name">{{item.nickname}}</span>
                              <span class="author-time">{{item.created_at}}</span>
                           </div>
                           <div class="icon-btn" v-if="item.can_chat==1">
                               <el-link type="primary" @click="openChat(item.user_id,item.nickname)">回复</el-link>
                           </div>
                           <div class="talk-box">
                              <div>
                                   <span v-if="item.answer_user_id!=0" class="answer-nickname">回复&nbsp;&nbsp;{{item.answer_nickname}}:</span>
                                   <span class="reply">{{item.content}}</span>
                              </div>
                              <div v-if="item.video_arr_length>0" style="margin-top:10px;">
                                <span class="answer-fj"><i class="el-icon-paperclip"></i>附件：</span>
                                <span v-for="(video_url,j) in item.m_video_arr" @click="showVideo(video_url)" class="answer-fj-item">视频{{j+1}}</span>
                              </div>
                           </div>
                           <el-divider></el-divider>
                        </div>
                    </div>
                </div>

                <el-dialog :title="current_nickname" :visible="showDialog" :destroy-on-close="true"  :show-close=false width="30%">
                    <el-form ref="message_form" :model="message_form" :rules="rules" label-width="80px">
                        <el-form-item label="文字回复" prop="content">
                            <el-input type="textarea"
                              :rows="3" v-model="message_form.content"></el-input>
                        </el-form-item>
                        <!-- <el-form-item label="视频回复" prop="video_str">
                            <UploadVideo :limit="3" :file_list="video_list" :catch_urls="catch_urls" :remove_urls="remove_urls" :upload_tip="upload_tip"></UploadVideo>
                        </el-form-item> -->
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="submitForm('message_form')" :loading="loading">{{button_name}}</el-button>
                        <el-button @click="closeChat()">关闭</el-button>
                    </div>
                </el-dialog>

                <!--video播放器-->
                <el-dialog title="视频播放" :visible="showVideoDialog" :destroy-on-close="true" width="50%" :before-close="closeVideoDialog" id="video-dialog">
                      <video id="myVideo" class="video-js" style="width:100%;height:500px;">
                        <source  :src="current_cast_video_url"  type="video/mp4">
                      </video>
               </el-dialog>
        </el-card>
    </div>
</template>

<script>
    import { getMessageDetail,answerTopic } from '@/api/message.js'
    import UploadVideo from '@/components/UploadVideo.vue'
    export default {
        name:'MessageDetail',
        inject:['reload'],
        components:{ UploadVideo },
        data() {
            return {
                message_form: {
                  content:'',
                  video_str:''
                },
                rules:{
                  content: [
                      { required:true , message:'请输入回复内容',trigger:'blur' }
                  ]
                },
                loading: false,
                button_name:'立即回复',
                checked_keys : [],
                content:'留言详情',
                info:{},
                showDialog:false,
                showVideoDialog:false,
                current_answer_user_id:-1,
                current_nickname:'回复',
                //下面是视频list
                form_video_list:[],
                video_list:[],
                video_name_list:[],
                upload_tip:'只能上传mp4文件，且不超过10M，最多只能上传3个',
                current_cast_video_url:'',
            }
        },
        methods: {
            submitForm(formName){
                    this.$refs[formName].validate((valid) => {
                            if (valid) {
                                this.loading=true;
                                this.button_name='正在提交';
                                //判断form_video_list是否有内容
                                if(this.form_video_list.length>0){
                                    this.message_form.video_str=JSON.stringify(this.form_video_list);
                                }
                                var send_data={
                                    content:this.message_form.content,
                                    video_str:this.message_form.video_str,
                                    topic_id:this.id,
                                    answer_user_id:this.current_answer_user_id
                                };
                                let that=this;
                                answerTopic(send_data).then(function(response){
                                    let type=response.data.code==1?'success':'error';
                                    that.$message({
                                        message:response.data.msg,
                                        type:type,
                                        onClose:function(e){
                                            that.loading=false;
                                            that.button_name='立即回复';
                                            that.showDialog=false;
                                            that.reload();
                                        }
                                    });
                                })
                            }else{
                                setTimeout(()=>{
                                  const is_error=document.getElementsByClassName('is-error');
                                  is_error[0].querySelector('input').focus();
                                },100);
                                return false;
                            }
                    })
            },
            back(){
                this.$router.go(-1);
            },
            openChat(user_id,message_nickname){
              this.current_answer_user_id=user_id;
              this.current_nickname='回复'+message_nickname;
              this.showDialog=true;
            },
            closeChat(){
              this.showDialog=false;
            },
            showVideo(video_url){
                this.showVideoDialog=true;
                this.current_cast_video_url=video_url;
                let that=this;
                setTimeout(function(){
                    that.initVideo();
                },100);
            },
            remove_urls(remove_file_name){
                for(let index in this.video_name_list){
                    if(this.video_name_list[index]==remove_file_name){
                        this.form_video_list.splice(index,1);
                        this.video_name_list.splice(index,1);
                        break;
                    }
                }
            },
            catch_urls(url,file_name){
               this.form_video_list.push(url);
               this.video_name_list.push(file_name);
            },
            initVideo(height) {
                    //初始化视频方法
                    let myPlayer = this.$video(myVideo, {
                        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                        controls: true,
                        //自动播放属性,muted:静音播放
                        autoplay: "muted",
                        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                        preload: "auto",
                        //设置视频播放器的显示宽度（以像素为单位）
                        /* width: "400px",
                        //设置视频播放器的显示高度（以像素为单位）
                        height: "400px", */
                    });
            },
            closeVideoDialog(){
              this.showVideoDialog=false;
            }
        },
        created(){
            let that=this;
            let send_data={
                id:this.id
            };
            getMessageDetail(send_data).then(function(response){
                 if(response.data.code==1){
                    that.info=response.data.info;
                 }
            })
        },
        computed:{
            id(){
                return this.$route.params.id;
            }
        }
    }
</script>

<style>
    .edit-el-form{
        margin-top:30px;
    }

    .chat-div{
        padding:30px 30px 20px 40px;
        font-size: 16px;
        color: #606266;
    }

    .author-title{
       padding-left:10px;
       padding-top:10px;
    }

    .author-title .el-divider--horizontal{
      margin:15px 0 0 0 !important;
    }

    .author-info{
        display: inline-block;
    }

    .author-info span{
        display: block;
        overflow: hidden;
    }

    .icon-btn{
        margin-right: 200px;
        margin-top:5px;
        padding:0 !important;
        float:right;
    }

    .answer-nickname{
      color: #409EFF;
    }

    .answer-fj{
      color: #67C23A;
    }

    .answer-fj-item{
      color:#909399;
      margin-right: 20px;
      cursor: pointer;
    }

    .author-name{
        color:#000000;
        font-weight: bold;
    }

    .talk-box{
        margin:0 45px;
    }

    .reply-box{
      margin:10px 0 0 40px;
      background-color: #EFEFEF;
    }

    #video-dialog .el-dialog__body{
        padding:0px 10px 10px 10px;
    }
</style>
